<template>
  <div>
    <el-container>
      <!--      <el-header style="margin-bottom: 20px">-->
      <!--&lt;!&ndash;        <label style="color: darkturquoise;font-weight: bolder;font-size: xxx-large">商家订单列表</label>&ndash;&gt;-->
      <!--      </el-header>-->
    </el-container>
    <!--      <el-button @click="resetDateFilter">清除日期过滤器</el-button>-->
    <!--      <el-button @click="clearFilter">清除所有过滤器</el-button>-->
    <el-card>
      <h1 style="margin: 0 auto;text-align: center;color: #6ECAE1">订单列表</h1>
      <el-table border ref="filterTable" :data="tableData" style="width: 100%">
        <el-table-column prop="createTime" label="购买日期" sortable width="150" column-key="date">
        </el-table-column>
        <el-table-column prop="buyUserName" label="购买人" width="120"></el-table-column>
<!--        <el-table-column prop="checkUserName" label="审核人" width="120"></el-table-column>-->
        <el-table-column prop="price" label="价格" width="120"></el-table-column>
        <el-table-column prop="phone" label="电话" width="120"></el-table-column>
        <el-table-column prop="cancel" label="订单状态" width="120">
          <template slot-scope="scope">
            {{ scope.row.cancel == 0 ? "已支付" : '' }}
            {{ scope.row.cancel == 1 ? "已取消" : '' }}
            {{ scope.row.cancel == 2 ? "已完成" : '' }}
            {{ scope.row.cancel == 3 ? "已发货" : '' }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="操作" width="330"
                         filter-placement="bottom-end">
          <template slot-scope="scope">
            <!--            <el-button style="margin-right: 10px" type="primary" size="mini"-->
            <!--                       @click="deleteOrder(scope.row)">取消订单</el-button>-->
            <el-button style="margin-left:10px" slot="reference"
                       class="detailBtn" type="success"
                       @click="getOrderDetail(scope.row)"
                       size="mini">查看订单详情
            </el-button>
            <!--无效代码-->
            <!--            <el-popconfirm @confirm="cancelTicket(scope.row)" title="确定要取消订单么？">-->
            <!--              <el-button  v-if="scope.row.cancel===0" style="margin-left:10px" class="deleteBtn"-->
            <!--                          type="danger"-->
            <!--                          size="mini">取消订单-->
            <!--              </el-button>-->
            <!--            </el-popconfirm>-->

            <el-popconfirm @confirm="finishedTicket(scope.row)" title="确定要完成订单么？">
              <el-button v-if="scope.row.cancel===0&&scope.row.status==2" style="margin-left:10px" slot="reference" class="deleteBtn"
                         type="danger"
                         size="mini">完成订单
              </el-button>
            </el-popconfirm>

<!--            <el-button v-if="scope.row.cancel===1" style="margin-left:10px" slot="reference" class="deleteBtn"-->
<!--                       type="primary"-->
<!--                       size="mini">已取消订单-->
<!--            </el-button>-->
            <el-button v-if="scope.row.cancel==0" style="margin-left:10px" slot="reference" class="deleteBtn"
                       type="warning"
                       @click="sendGoods(scope.row)"
                       size="mini">发货
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog
        title="订单花卉列表"
        :visible.sync="centerDialogVisible"
        width="50%"
        center>
      <table>
        <thead>
        <tr>
          <th width="200">商品信息</th>
          <th width="60">单价</th>
          <th width="220">数量</th>
          <th width="140">小计</th>
        </tr>
        </thead>
        <!-- 商品列表 -->
        <tbody>
        <tr v-for="i in orderMedicineList" :key="i.attrsText">
          <td>
            <div class="goods" style="margin-left: 60px">
              <div>
                <p style="" class="name ellipsis">
                  {{ i.name }}
                </p>
              </div>
              <div style="">
                <img :src="i.image" style="width: 100px;
                               height: 80px;float: left;
                               line-height: 80px" alt=""/>
              </div>
            </div>
          </td>
          <td class="tc">
            <p style="color: red;font-weight: bolder">&yen;{{ i.price }}</p>
          </td>
          <td class="tc">
            <!--            <el-input-number v-model="i.sum"  :min="1"/>-->
            <div style="margin-left: 100px">{{ i.sum }}</div>
          </td>
          <td class="tc" style="margin-left: 120px">
            <!--            <p class="f16 red" style="color: red;font-weight: bolder">&yen;{{ (i.price * i.sum).toFixed(2) }}</p>-->
            <div style="width:100px;margin-left: 100px;color: red;font-weight: bolder">
              {{ (i.price * i.sum).toFixed(2) }}
            </div>
          </td>
        </tr>
        <div style="margin-left: 40px">
          合计：<span
            style="width:100px;margin-top: 100px;color: red;font-weight: bolder">{{ (totalPrice).toFixed(2) }}</span>元
        </div>
        <div v-if="orderProscriptionImage" style="margin-left: 40px">
          处方图
          <img :src="orderProscriptionImage" style="width: 100%;height: 100px;margin-top: 10px" alt=""/>
        </div>
        <!--        <tr v-if="orderMedicineList.length === 0">-->
        <!--          <td colspan="6">-->
        <!--            <div class="cart-none">-->
        <!--              <el-empty description="购物车列表为空">-->
        <!--&lt;!&ndash;                <el-button type="primary" @click="$router.push({path:'/'})">随便逛逛</el-button>&ndash;&gt;-->
        <!--              </el-empty>-->
        <!--            </div>-->
        <!--          </td>-->
        <!--        </tr>-->
        </tbody>
      </table>
    </el-dialog>
    <el-row>
      <el-col :span="12" :offset="12">
        <el-pagination layout="total,prev, pager, next,jumper,sizes " background small prev-text="上一页" next-text="下一页"
                       :total="total" :page-size="pageSize" :current-page="pageNow" :page-sizes="[10, 20, 50]"
                       style="margin:15px 0px"
                       @current-change="findPage" @size-change="findSize">
        </el-pagination>
      </el-col>
    </el-row>
    <!--    &lt;!&ndash;      个人信息展示&ndash;&gt;-->
  </div>
</template>
<script>
export default {
  name: 'orderManagement',
  data() {
    return {
      totalPrice: 0,
      pageNow: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      orderDetailShow: false,
      size: '',
      searchByType: 0,
      orderDetail: {
        user: 'medium'
      },
      centerDialogVisible: false,
      orderMedicineList: [],
      orderProscriptionImage: '',

    };
  },

  mounted() {
    this.getOrderList()
    // this.$bus.$on("getOrderList",this.refreshMsg)
  },
  beforeDestroy() {
    // this.$bus.$off("getOrderList")
  },

  methods: {
    // 单选回调
    singleCheck() {

    },
    // 全选回调
    allCheck() {

    },
    // 删除产品的回调
    delCart() {

    },

    rejectedOrder(row) {
      this.$http.put("/order/rejected/" + row.id).then(res => {
        this.$message({
          message: res.data.data,
          type:'success'
        });
        this.getOrderList()
      });
    },

    agreeOrder(row) {
      this.$http.put("/order/agree/" + row.id).then(res => {
        this.$message({
          message: res.data.data,
          type:'success'
        });
        this.getOrderList()
      });
    },
    sendGoods(row) {
      this.$http.put("/order/send/" + row.id).then(res => {
        this.$message({
          message: res.data.data,
          type:'success'
        });
        this.getOrderList()
      });
    },
    getOrderDetail(row) {
      // console.info(row.id)
      this.centerDialogVisible = true
      this.$http.get("/order/" + row.id).then(res => {
        console.info(res.data.data.list);
        this.orderMedicineList = res.data.data.list
        this.totalPrice = res.data.data.totalPrice
        this.orderProscriptionImage = res.data.data.image
        // this.getOrderList()
      });
    },

    cancelTicket(item) {
      // console.info("取消")
      // console.info(item)
      this.$http.put("/order/cancel/" + item.id).then(res => {
        this.$message({
          message: res.data.data,
          type: 'success'
        });
        this.getOrderList()
      });
    },

    finishedTicket(item) {
      this.$http.put("/order/finished/" + item.id).then(res => {
        this.$message({
          message: res.data.data,
          type: 'success'
        });
        this.getOrderList()
      });
    },

    deleteOrder(item) {
      console.info(item)
    },
    //改变页码数据量大小
    findSize(size) {
      this.pageSize = size
      this.getOrderList()
    },
    changeMsgStatus(mid) {
      this.$http.put("/order/status/" + mid).then(res => {
        // console.log(res.data)
      });
      this.getOrderList()
    },
    findPage(page) {
      this.pageNow = page
      this.getOrderList()

    },
    //获取订单列表
    getOrderList() {
      let uid = JSON.parse(window.sessionStorage.getItem("user")).id
      this.$http.get("/order/list/" + this.pageNow + "/" + this.pageSize + "/" + uid).then(res => {
        console.log(res.data.data)
        this.tableData = res.data.data.records
        this.total = res.data.data.total
      })
    },


    formatter(row, column) {
      return row.content;
    },
    filterTag(value, row) {
      return row.status === value;
    },
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    }
  },

};
</script>

<style lang='scss' scoped>
.xtx-cart-page {
  margin-top: 20px;

  .cart {
    background: #FCFAF7;
    color: #666;

    table {
      border-spacing: 0;
      border-collapse: collapse;
      line-height: 24px;

      th,
      td {
        padding: 10px;
        border-bottom: 1px solid #f5f5f5;

        &:first-child {
          text-align: left;
          padding-left: 30px;
          color: #999;
        }
      }

      th {
        font-size: 16px;
        font-weight: normal;
        line-height: 50px;
      }
    }
  }

  .cart-none {
    text-align: center;
    padding: 120px 0;
    background: #FCFAF7;

    p {
      color: #999;
      padding: 20px 0;
    }
  }

  .tc {
    margin-left: 60px;
    text-align: center;

    a {
      color: $xtxColor;
    }

    .xtx-numbox {
      margin: 0 auto;
      width: 120px;
    }
  }

  .red {
    color: $priceColor;
  }

  .green {
    color: $xtxColor;
  }

  .f16 {
    font-size: 16px;
    text-align: center;
    margin-left: 50px;
  }

  .goods {
    display: flex;
    align-items: center;

    img {
      width: 100px;
      height: 100px;
    }

    > div {
      width: 280px;
      font-size: 16px;
      padding-left: 10px;

      .attr {
        font-size: 14px;
        color: #999;
      }
    }
  }

  .action {
    display: flex;
    background: #FCFAF7;
    margin-top: 20px;
    height: 80px;
    align-items: center;
    font-size: 16px;
    justify-content: space-between;
    padding: 0 30px;

    .xtx-checkbox {
      color: #999;
    }

    .batch {
      a {
        margin-left: 20px;
      }
    }

    .red {
      font-size: 18px;
      margin-right: 20px;
      font-weight: bold;
    }
  }

  .tit {
    color: #666;
    font-size: 16px;
    font-weight: normal;
    line-height: 50px;
  }

}
</style>
